Typora主题定制之数学公式和字体篇

您所在的位置：网站首页 › typora 公式加粗 › Typora主题定制之数学公式和字体篇

Typora主题定制之数学公式和字体篇

2024-06-23 12:02| 来源: 网络整理| 查看: 265

tags: CSS Frontend Tips 写在前面

最近偏爱一款Typora主题, 叫做Monospace-dark, 其GitHub主页如下:

typora/typora-monospace-theme: A monospace theme for Typora (github.com);

我做了一些修改, 其实就是CSS文件, 放在了dotfile/typora-theme at main · Apocaly-pse/dotfile (github.com);

字体上我用了JetBrainsMono Nerd Font Mono这款支持字符合并的字体, 之前在终端和sublime上用起来还不错, 于是就想着移植到typora了, 但是这也走了很多弯路, 因为我没学过CSS, 都是依靠一点一点尝试和查看文档来做的.

下面的修改都是基于Monospace-dark这款主题的.

字体的下载:

[nerd-fonts/JetBrains Mono Regular Nerd Font Complete Mono.ttf at master · ryanoasis/nerd-fonts (github.com)](https://github.com/ryanoasis/nerd-fonts/blob/master/patched-fonts/JetBrainsMono/Ligatures/Regular/complete/JetBrains Mono Regular Nerd Font Complete Mono.ttf);

字体的修改

这里我修改了代码字体和正文字体, 这样在正文中使用->就会显示出一个箭头了.

/* 更改正文的英文&符号的字体 */ html, body { font-size: 18px; color: #ebebeb; background: #222; background: var(--bg-color); font-family: 'JetBrainsMono Nerd Font Mono', monospace; } /* 更改代码字体 */ .CodeMirror { font-family: 'JetBrainsMono Nerd Font Mono', monospace; }

然后退出typora再打开就可以看到字体的变化了.

数学公式行内公式

这里的行内公式指的是形如$\sin$这样的公式, 一开始这里的字体颜色不好看, 并且由于是暗色主题, 看起来对比不明显, 下面参考了默认的typora主题github-dark, 使用下面的代码修改:

:root { --bg-color: #222; --side-bar-bg-color: #5F5F5F; --active-file-text-color: #222; --text-color: #ebebeb; --window-border: 1px solid #606060; --active-file-bg-color: rgba(219, 219, 253, 0.4); /*--active-file-text-color: white;*/ --control-text-color: #ccc;/* 边栏字体颜色*/ --item-hover-bg-color: #161b22; /*鼠标悬停时控件项的背景，如侧边栏中的菜单*/ } /* math */ .md-inline-math g, .md-inline-math svg { stroke: #b8bfc6 !important; fill: #b8bfc6 !important; } /* Inline Math Editing */ .md-inline-math script { color: #f9826c; } /* Edit Math Blocks */ .md-rawblock-control:not(.md-rawblock-tooltip) { font-size: 1rem; background-color: var(--item-hover-bg-color); } .MathJax_SVG:focus { outline: none; background-color: transparent; } /* cover color */ [md-inline='inline_math'] { color: #F1BFE9; } 行间公式(公式块,block)

这里一开始的鼠标悬停颜色是纯白色, 然后字体还是白的, 啥也看不到, 后来看了issue1知道了要这样改:

:root {/* 添加 */ --rawblock-edit-panel-bd: #161b01; /* 数学公式块的鼠标悬停颜色 */ }

Math edit interface background · Issue #5 · typora/typora-monospace-theme (github.com); ↩︎

【本文地址】

Typora主题定制之数学公式和字体篇

Typora主题定制之数学公式和字体篇

今日新闻

推荐新闻